<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/redmond/jquery-ui.css" rel="stylesheet" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<title>Lista de Tarefas</title>
</head>
<body>

	<script type="text/javascript">
		function finalizaAgora(id) {
			$.post("finalizaTarefa", {'id' : id}, function(resposta) {
				// selecionando o elemento html atraves da
				//ID e alterando o HTML dele
				$("#tarefa_" + id).html(resposta);
			});
		}

		function removeAgora(id) {
			$.post("removeTarefa", {'id' : id}, function() {
				// selecionando o elemento html atraves da
				//ID e alterando o HTML dele
				$("td").closest("tr").hide();
			});
		}
	</script>

	<a href="novaTarefa">Criar nova tarefa</a>
	<br /><br />
	
	<table>
		<tr>
			<td>Id</td>
			<td>Descrição</td>
			<td>Finalizado?</td>
			<td>Data de finalização</td>
		</tr>
		<c:forEach items="${tarefas}" var="tarefa">
			<tr id="tarefa_${tarefa.id}">
				<td>${tarefa.id}</td>
				<td>${tarefa.descricao}</td>
				<c:if test="${tarefa.finalizado eq false}">
					<td>
						<a href="#" onclick="finalizaAgora(${tarefa.id})">
							Finalizar agora!
						</a>
					</td>
				</c:if>
				<c:if test="${tarefa.finalizado eq true}">
					<td>Finalizado</td>
				</c:if>
				<td>
					<fmt:formatDate value="${tarefa.dataFinalizacao.time}"
						pattern="dd/MM/yyyy"/>
				</td>
				<td>
					<a href="removeTarefa?id=${tarefa.id}">Remover</a>
				</td>
				<td>
					<a href="mostraTarefa?id=${tarefa.id}">Alterar</a>
				</td>
				<td>
					<a href="#" onclick="removeAgora(${tarefa.id})">
						excluir
					</a>
				</td>
			</tr>
		</c:forEach>
	</table>

</body>
</html>